<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 全局注册和局部注册的区别：全局注册的可以在全局使用，作用域更大；局部注册的组件只能在实例内部使用。 -->
  <!-- <div id="app2">
    <p>我是另外一个vue实例</p>
    <com1></com1>
    <com2></com2>
  </div> -->
  <div id="app">
    <p>组件：根据视图效果或者功能，将页面分成不同的模块，就是组件，目的是为了复用。</p>
    <p>
      使用组件的步骤：1.注册（全局注册、局部注册）2.当做标签使用
    </p>
    <p>
      注意事项：
      1.组件的模板中有且只有一个根元素.Component template should contain exactly one root element.
      2.data选项应该是一个有返回值的函数.如果写成对象，在组件复用时，数据会互相影响；写成有返回值的函数后，每次复用组件，都会调用函数并返回一个新的对象，组件各自维护独立的数据，互不影响。
      3.组件命名：小写字母，在js代码中定义组件时使用驼峰形式，在html模板中使用组件时，用中划线的形式
      4.不要将组件名命名为html的标签名,不确定就加v-
      5.可以将组件类比为标签，外层的是父级（父组件），里层是子集（子组件），平级是兄弟组件。
    </p>
    <button @click="num ++">{{num}}</button>
    <button @click="num ++">{{num}}</button>
    <hr>
    <com1></com1>
    <com1></com1>
    <v-side></v-side>
    <com2></com2>
  </div>
  <!-- template要写在app的外面 -->
  <template id="myCom">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </template>
  <template id="com3">
    <div>
      <mark>{{info}},我是全局注册的组件</mark>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    // 全局注册
    Vue.component('com2', {
      template: '#com3',
      data() {
        return {
          info: 'hi~'
        }
      }
    })
    let vm = new Vue({
      el: '#app',
      data: {
        num: 0
      },
      // 局部注册，带上s
      components: {
        com1: {
          // 模板
          template: `
            <div>
              <div>我是一个组件-title</div>
              <div>我是组件的内容{{msg}}</div>
              <button @click="num ++">{{num}}</button>
            </div>
          `,
          data() {
            return {
              msg: 'hello',
              num: 0
            }
          }
        },
        vSide: {
          template: '#myCom'
        }
      }
    })
    // let vm2 = new Vue({
    //   el:'#app2',
    //   components: {

    //   }
    // })
 </script>
</body>

</html>